<template>
  <div class="nest-container">
    <Nested :tasks="data" group="people" :componentsObj="componentsObj" :activeComponent="activeKey" @activeDargComponent="activeDargComponent" @handlerComponent="handlerComponent"/>
    <el-empty :image-size="200" v-if="data.length === 0" description="暂无数据" class="postion-center"/>
  </div>
</template>
<script setup>
import { removeByField } from '@/utils/index'
const props = defineProps(['data'])
const { data } = toRefs(props)
// 收集所有组件
const componentsObj = {}
// 创建一个上下文，导入指定文件夹内的所有Vue文件
const files = import.meta.glob('./viewComponents/*.vue')

Object.keys(files).forEach(async key => {
  const componentConfig = await files[key]()
  const componentName = key.split('/').pop().replace(/\.\w+$/, '')
  componentsObj[componentName] = componentConfig.default || componentConfig
})
const emit = defineEmits(['activeDargComponent'])
// 选中态
const activeComponent = ref(null)
const activeDargComponent = (el) => {
  emit('activeDargComponent', el)
  activeComponent.value = el
}
const activeKey = computed(() => {
  return activeComponent.value?.key || null
})

// 操作栏
const handlerComponent = (el, type) => {
  console.log(el, type)
  switch (type) {
    case 'copy':
      console.log('copy')
      break
    case 'delete':
      removeByField(data.value, 'key', el.key)
      break
    default:
      break
  }
}
</script>
<style lang="scss" scoped>
.nest-container{
  height: 100%;
  overflow: hidden;
  position: relative;
  >div:first-child{
    height: 100%;
    outline:0 !important;
    padding: 30px 20px;
    overflow-y: auto;
    box-sizing: border-box;
    display: block !important;
  }
}
</style>
